<!--
 * @LastEditTime: 2023-11-07 09:20:36
 * @FilePath: \bdcar-net\src\views\comlbs\orderConfiguration\polymorphicInput.vue
-->
<template>
    <el-date-picker v-if="props.data.type == 'timePicker'" v-model="props.data.value" type="datetime" class="myInput"
        :placeholder="'请选择' + props.data.name" value-format="YYYY-MM-DD HH:mm:ss" style="margin-left: 7px;" />
    <el-input v-else-if="props.data.type == 'noValue'" v-model="props.data.value" class="myInput" disabled></el-input>
    <el-select v-else-if="props.data.type == 'boolSelect'" v-model="props.data.value" class="myInput"
        :placeholder="'请选择' + props.data.name" filter>
        <el-option label="是" value="true"></el-option>
        <el-option label="否" value="false"></el-option>
    </el-select>
    <el-select v-else-if="props.data.type == 'dictSelect'" v-model="props.data.value" class="myInput"
        :placeholder="'请选择' + props.data.name" filter>
        <el-option v-for="item in props.sel_option[props.data.prop]" :key="item.value" :label="item.label"
            :value="item.value">
        </el-option>
    </el-select>
    <el-select v-else-if="props.data.type == 'interfaceSelect' || props.data.type == 'interfaceMupti'"
        v-model="props.data.value" class="myInput" :placeholder="'请选择' + props.data.name"
        :multiple="props.data.type == 'interfaceMupti'" collapse-tags collapse-tags-tooltip
        @change="setOtherValue(props.data.value, props.data.prop)">
        <el-option v-for="item in props.sel_option[props.data.prop]" :key="item.value" :label="item.label"
            :value="item.value" filter>
        </el-option>
    </el-select>
    <el-input-number v-else-if="props.data.type == 'numberInput'" v-model="props.data.value" :placeholder="'请输入数字'"
        class="myInput" />
    <!-- v-if="props.data.type == 'input'"  兼容没有选择下拉的代码 -->
    <el-input v-else v-model="props.data.value" class="myInput" :placeholder="'请输入' + props.data.name"></el-input>
    <div class="param-tips" v-if="props.data.tips">提示：{{ props.data.tips }}</div>
</template>
<script setup>
const props = defineProps({
    sel_option: { type: Object, },
    data: { type: Object, },
    setOtherValue: { type: Function }
});
</script>
<style lang='scss' scoped>
.myInput {
    width: 220px;
    margin-left: 10px;
}

.param-tips {
    position: absolute;
    color: #b4b4b4;
    font-size: 12px;
    left: 22px;
    bottom: -5px;
    text-align: left;
}
</style>